<template lang="pug">
 .goods-child
    .has-list(v-if="result.length>0")
        .goods-list(v-for="(item,index) in result",:key="index")
            h3.title {{item.name}}
            .goods-detail(class="base-line--top",v-for="(pro,index) in item.items",v-if="pro.item_id!==-1")
                .goods-img(@click="showImg(pro.images)")
                    img(:src="pro.images")
                .goods-des
                    h4.goods-tit(@click="toDetail") {{pro.brand_name}} #[span {{pro.item_no}}]
                    p
                        span.tag(v-for="(item,index) in pro.properties") {{item.name}}:{{item.value}}
                .goods-link(@click="showPopup(pro)") 详情
        mt-popup(v-model="popupVisible",position="bottom")
            h3(class="base-line--bottom popup-title") {{popupInfo.brand_name}}{{popupInfo.item_no}}参数
            mt-cell(:title="item.name",:value="item.value",v-for="(item,index) in popupInfo.properties",:key="index",class="base-line--bottom")
        imageView(v-if="isImageViewShow",@imageWindow = "getImageWindow")
    noPanel(v-else)
</template>

<script>
import imageView from '@/components/function/imageView.vue'
import noPanel from '@/components/function/noPanel.vue'
export default {
  name: '',
  data () {
    return {
      result: [],
      popupVisible: false,
      isImageViewShow: false,
      popupInfo: {}
    }
  },
  props: {
    carData: {
      type: Object
    }
  },
  components: {
    imageView,
    noPanel
  },
  watch: {

  },
  mounted () {
    this.getList()
  },
  methods: {
    showImg (imgs) {
      this.isImageViewShow = true
      this.$store.commit('SET_IMGLIST', imgs)
    },
    getImageWindow (val) {
      this.isImageViewShow = val
    },
    showPopup (pro) {
      this.popupInfo = pro
      this.popupVisible = true
    },
    toDetail () {
      this.$router.push({
        name: 'detail',
        query: {
          id: 11111
        }
      })
    },
    async getList () {
      let params = {
        'type': 0,
        'auto_type': this.carData.signal,
        'auto_key': this.carData.key
      }
      let oList = await carAPI.searchpartitems(params)
      let result = oList || {}
      this.result = result.results || []
      console.log(this.result)
    }
  }
}
</script>

<style scoped lang="scss" >
    .goods-child{
        h3.popup-title{
            text-align: center;
            padding: 24px 0;
        }
        h3.title{
            font-size: 28px;
            padding: 12px 0;
            color:#999;
            text-indent: 1em;
            span{
                color:#ff8000;
                margin-left: 14px;
                font-size: 20px;
            }
        }
        .goods-detail{
            background: #fff;
            display: flex;
            min-height: 210px;
            align-items: center;
            padding: 0 20px;
            font-size: 24px;
            .goods-img{
                width: 128px;
                height: 128px;
                display: flex;
                align-items: center;
                img{
                    width: 128px;
                }
            }
            .goods-des{
                flex: 1;
                height: 150px;
                margin-left: 36px;
                h4.goods-tit{
                    font-size: 32px;
                    line-height: 56px;
                    color: #666;
                    span{
                        color: #006ad7
                    }
                }
                p{
                    color: #999;
                    line-height: 40px;
                    .tag{
                        padding-right: 12px;
                    }
                }

            }
            .goods-link{
                width: 60px;
                text-align: center;
                color: #006ad7;
            }
        }
    }
</style>
